<template>
  <div class="app-container">
      <!-- 查询书籍条件 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.name" placeholder="书籍名称"/>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchObj.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchObj.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getSameF()">查询</el-button>
      <el-button type="danger" @click="resetData()">清空</el-button>
      <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="open()">添加</el-button>
    </el-form>

    <!-- 书籍列表 -->
    <el-table
      :data="list"
      border
      fit
      highlight-current-row>
      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
        <el-table-column prop="name" label="书籍名称" width="270" />
        <el-table-column prop="price" label="价格" width="250"  />
        <el-table-column prop="gmtCreate" label="添加时间" width="300"/>
        <el-table-column label="操作" width="550" align="center">
        <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" v-on:click="queryBook(scope.row.id)">修改</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeBook(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :pager-count="count"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="fetchData"
    />

    <!-- 对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
  
      <el-input v-model="book.name" placeholder="书籍名称"/>
      <el-input v-model="book.price" placeholder="书籍价格"/>
    <!-- <div v-if="this.book.id==null">  
    <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">第一张是头图 其他都是点缀</div>
    </el-upload>
    </div>
    <div v-else>
        <div class="demo-image__preview">
        <el-image 
        style="width: 100px; height: 100px"
        :src="url" 
        :preview-src-list="srcList"></el-image>
    </div> 
    </div>-->
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveOrUpdate">确 定</el-button>

    </span>
    </el-dialog>
  </div>
</template>
<script>


export default {
  data() {
      return {
          // 查询条件
          searchObj:{
              name:'',
              begin:'',
              end:'',
          },
          // 书籍列表数据
          list:[],
          // 分页
          page: 1,
          limit: 5,
          total: 10,
          count: 7,
          // 弹框
          dialogVisible: false,
          // 书籍
          book:{
            id:'',
            name:'',
            price:'',
          },
          // 图片集合
          fileList:[],

    
      }
  },
  created() {         // 当页面加载时获取数据
      this.getList(1,5);
  },
  methods: {
      getList(current,limit){
      let this_ = this;  
      this.$axios
        .get(`http://localhost:88/api/book/info/get/list/page/${current}/${limit}`)
        .then(function (response) {
          this_.list=response.data.page.records;
          this_.page=response.data.page.current;
          this_.limit=response.data.page.size;
          this_.total=response.data.page.total;
          // this_.count=response.data.page.pages;
        })
        .catch(function (err) {
          console.log(err);
        });
        },

      fetchData(val){
        this.page=val;
        if(this.searchObj.name||this.searchObj.end||this.searchObj.begin){
          this.getSameData(this.page,this.limit);
        }else{
           this.getList(this.page,this.limit);
        }   
      },
      open(){  // 打开添加窗体
          this.dialogVisible = true;
          this.book.name='';
          this.book.price='';  
      },
      addBook(){
        let this_ = this;  
        this.$axios
        .post(`http://localhost:88/api/book/info/save`,this.book)
        .then(function (response) {
            alert("添加成功"+this_.book);
            console.log(this_.book);          
        })
        .catch(function (err) {
          console.log(err);
        });
      },
      queryBook(bookId){ //打开更新窗体    
          this.dialogVisible=true;             
         // 查询书籍
          let this_ = this;  
          this.$axios
          .get(`http://localhost:88/api/book/info/info/${bookId}`)
          .then(function (response) {
            this_.book=response.data.book;
        })
        .catch(function (err) {
          console.log(err);
        });
      },
      updateBook(){
          let this_ = this;                    console.log(this.book);
          this.$axios
          .post(`http://localhost:88/api/book/info/update`,this.book)
          .then(function (response) {
            alert("修改完成");
            this_.book.id='';
            this_.book.name='';
            this_.book.price='';
        })
        .catch(function (err) {
          console.log(err);
        }); 
 
      },
      removeBook(bookId){
          let this_ = this;  
          this.$axios
          .post(`http://localhost:88/api/book/info/deleteOne/${bookId}`)
          .then(function (response) {
            alert("删除完成");
            this_.getList(this_.page,this_.limit);
        })
        .catch(function (err) {
          console.log(err);
        });  
        // alert(bookId);
      },
      saveOrUpdate(){
          if(this.book.id){ //  修改操作
            this.updateBook();
            this.dialogVisible=false;
            this.getList(this.page,this.limit);
          }else{  // 添加操作
            this.addBook();
            this.dialogVisible=false;
             this.getList(this.page,this.limit);
          }
          
      },

      getSameData(current,limit){
          let this_ = this;  
          this.$axios
          .post(`http://localhost:88/api/book/info/info/same/${current}/${limit}`,this.searchObj)
          .then(function (response) {
            alert("查询完成");
          this_.list=response.data.page.records;
          this_.page=response.data.page.current;
          this_.limit=response.data.page.size;
          this_.total=response.data.page.total;
        })
        .catch(function (err) {
          console.log(err);
        });  
      },
      getSameF(){
        this.getSameData(1,this.limit);
      },

      resetData(){
        this.searchObj.name='';
        this.searchObj.begin='';
        this.searchObj.end='';
      },

      handleRemove(file, fileList) {
        console.log(file, fileList);
        alert("handleRemove");
      },
      handlePreview(file) {
        console.log(file);
        alert("handlePreview");
      },
      handleClose(){
        this.dialogVisible=false;
      }
  }
}
</script>